<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小学数学练习</title>
    <style>
        .container {
            margin: auto;
            margin-top: 100px;
            width: 600px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px black;
        }

        .control-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .rows {
            display: flex;
            margin-bottom: 10px;
            padding: 10px;
        }

        .box {
            flex: 1;
            padding: 10px;
            text-align: center;
            border: 1px solid #000;
        }

        .answerin {
            width: 60px;
            text-align: center;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .correct {
            color: green;
        }
        .wrong {
            color: red;
        }

        #checkBtn {
            display: block;
            margin-left: 500px;
            padding: 10px 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="control-row">
            <input type="number" id="questionCount" placeholder="输入题目数量" min="1" value="5">
            <button onclick="generateQuestions()">生成题目</button>
        </div>
        <div id="questionsContainer">
        </div>
        <button id="checkBtn" onclick="checkAnswers()">检查答案</button>
    </div>

    <script>
        function generateQuestions() {
            let count = parseInt(document.getElementById('questionCount').value);
            let container = document.getElementById('questionsContainer');
            container.innerHTML = '';

            for (let i = 0; i < count; i++) {
                let row = document.createElement('div');  // 新建题目行
                row.className = 'rows';

                let num1 = Math.floor(Math.random() * 100);  // 0~99
                let num2 = Math.floor(Math.random() * 100);
                let operator = Math.random() < 0.5 ? '+' : '-';  // +和-各50%概率
           
                let questionBox = document.createElement('div');  // 创建题目框
                questionBox.className = 'box';
                questionBox.innerText = num1+ ' '+operator+' ' +num2 +' = ';
                
                let inputBox = document.createElement('input');  // 输入框
                inputBox.type = 'number';
                inputBox.className = 'answerin box';
                
                let resultBox = document.createElement('div');
                resultBox.className = 'box result';  // 加2个类名修改样式
                
                row.dataset.answer = operator =='+'?(num1+num2):(num1-num2);  // 答案
                row.appendChild(questionBox);
                row.appendChild(inputBox);
                row.appendChild(resultBox);

                container.appendChild(row);  // 页面上新建儿子div
            }
        }

        function checkAnswers(){
            let rows = document.querySelectorAll('.rows');
            rows.forEach(row=>{
                let answer = parseInt(row.querySelector('.answerin').value);
                let correctAnswer = parseInt(row.dataset.answer);
                let resultBox = row.querySelector('.result');
                
                if (isNaN(answer)) {
                    resultBox.innerText = '请输入答案';
                    resultBox.className = 'box result';
                } else if (answer === correctAnswer) {
                    resultBox.innerText = '✓';
                    resultBox.className = 'box result correct';
                } else {
                    resultBox.innerText = '×正确答案: ' + correctAnswer;
                    resultBox.className = 'box result wrong';
                }
            });
        }
        generateQuestions();  // 首次加载
    </script>
</body>
</html>